<style scoped>

</style>
<template>
    <div>
        <div class="top-title bg-white">
            <div class="top-title-text text-18 black blod">人员聚集预警消息</div>
        </div>
        <div class="page-content flex-column" style="height: calc(100% - 50px);">
            <div class="search-block bg-white p-20">
                <Form inline :label-width="20">
                    <FormItem label=" ">
                        <Input v-model="search.str" class="w240" type="text" placeholder="请输入人员名称/手机号"/>
                    </FormItem>
                    <FormItem label=" ">
                        <DatePicker v-model="search.timeArr" @on-change="changeDate" class="w240" type="daterange"
                                    split-panels placeholder="日期范围" clearable></DatePicker>
                    </FormItem>
                    <FormItem label=" " :label-width="20">
                        <Select v-model="search.progress" class="w160"placeholder="状态" clearable>
                            <Option value="1">已制定方案</Option>
                            <Option value="2">未制定方案</Option>
                        </Select>
                    </FormItem>
                    <FormItem :label-width="0">
                        <Button @click="goSearch" class="m-r-10" type="primary">搜索</Button>
                        <Button @click="reset">重置</Button>
                    </FormItem>
                    <FormItem class="f-r" :label-width="0">
                        <Button @click="addItem" class="m-r-10" type="primary"><img src="assets/image/add.png">导出Excel</Button>
                    </FormItem>
                </Form>
            </div>

            <div class="content-block bg-white p-0-20 flex-1 flex-column">

                <div id="mainContent" class="flex-1-height">

                    <div class="">
                        <Table :height="tableHeight"
                               :columns="columns"
                               :data="list"
                        >
                        </Table>
                    </div>

                </div>
                <div class="page-box">
                    <Page :total="total"
                          :current="page"
                          show-sizer show-elevator show-total
                          @on-change="onPageChange"
                          @on-page-size-change="changePageSize"
                          :page-size="pageSize"
                    />
                </div>

            </div>
        </div>
<!--
        <Modal v-model="itemModal"
               title="预警处理"
               class-name="vertical-center-modal"
               width="800"
        >
            <div class="p-l-20 max-h500">
                <div class="top-title-text text-18 black blod">基础信息</div>

                <div class="p-20">

                    <div class="flex h30 m-b-20">

                        <div class="flex w30p">
                            <div class="gray w80">人员姓名：</div>
                            <div class="flex-1">{{itemData.mc}}</div>
                        </div>
                        <div class="flex w30p">
                            <div class="gray w80">性别：</div>
                            <div class="flex-1">男</div>
                        </div>
                        <div class="flex w30p">
                            <div class="gray w80">岗位：</div>
                            <div class="flex-1">{{itemData.gw}}</div>
                        </div>
                    </div>

                    <div class="flex h30 m-b-20">

                        <div class="flex w30p">
                            <div class="gray w80">手机号码：</div>
                            <div class="flex-1">{{itemData.sjh}}</div>
                        </div>
                        <div class="flex w30p">
                            <div class="gray w100">紧急联系人：</div>
                            <div class="flex-1">&#45;&#45;&#45;&#45;&#45;&#45;</div>
                        </div>
                        <div class="flex w30p">
                            <div class="gray w80">手机号码：</div>
                            <div class="flex-1">&#45;&#45;&#45;&#45;&#45;&#45;</div>
                        </div>
                    </div>

                    <div class="flex h30 m-b-20">

                        <div class="flex w30p">
                            <div class="gray w80">所属机构：</div>
                            <div class="flex-1">{{itemData.jg}}</div>
                        </div>
                        <div class="flex w30p">
                            <div class="gray w80">考勤区域：</div>
                            <div class="flex-1">{{itemData.qy}}</div>
                        </div>
                    </div>
                </div>
                <div class="top-title-text text-18 black blod">处理措施</div>

                <div class="p-20">
                    <div class="flex-c">
                        <div class="w100"><span class="red">*</span> 上传附件</div>
                        <Upload class="w30p" type="drag" :before-upload="uploadFile"
                                action="//jsonplaceholder.typicode.com/posts/">
                            <p class="h50">
                                <Icon class="m-r-10" size="20" type="ios-cloud-upload-outline"></Icon>
                                <a>点击上传</a></p>
                        </Upload>
                    </div>
                    <div class="flex-c">
                        <div class="w100"></div>
                        <div class="w30p">

                            <div class="file-item h30 flex"
                                 v-for="(item,i) in fileList"
                                 :key="i"
                            >
                                <Icon class="h30 m-r-5" size="18" type="ios-attach"/>
                                <a :href="util.imgHost + item" target="_blank" class="flex-1-width text-e">{{item &&
                                    item.split('/')[2] || '文件' + (i+1)}}</a>
                                <a @click="fileList.splice(i, 1)" class="del-btn">x</a>
                            </div>

                        </div>
                    </div>


                    <div class="flex m-b-15">
                        <div class="w100"><span class="red">*</span> 处理说明</div>
                        <Input v-model="itemData.case_summary" type="textarea" maxlength="500" show-word-limit
                               :rows="3" class=" w320" placeholder="请输入处理过程"></Input>
                    </div>

                    <div class="flex m-b-15">
                        <div class="w100"><span class="red">*</span> 是否已处理</div>
                        <RadioGroup v-model="itemData.a">
                            <Radio label="已处理"></Radio>
                            <Radio label="未处理"></Radio>
                        </RadioGroup>
                    </div>
                </div>
            </div>

            <div slot="footer">
                <Button @click="itemModal = false" class="m-r-10">取消</Button>
                <Button @click="confirm" type="primary">确定</Button>
            </div>
        </Modal>-->


        <Modal v-model="itemModal"
               title="人员聚集"
               class-name="vertical-center-modal"
               width="800"
        >
            <div class="p-l-20 max-h550">
                <div class="top-title-text text-18 black blod">电子围栏信息</div>
                <div class=" max-h500">

                    <div class="p-10">

                        <div class="flex h30 m-b-10">

                            <div class="flex w30p">
                                <div class="gray w80">围栏名称：</div>
                                <div class="flex-1">{{ itemData.wl }}</div>
                            </div>
                            <div class="flex w30p">
                                <div class="gray w80">负责人：</div>
                                <div class="flex-1">{{ itemData.mc }}</div>
                            </div>
                            <div class="flex w30p">
                                <div class="gray w80">联系方式：</div>
                                <div class="flex-1">{{ itemData.sjh }}</div>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="top-title-text text-18 black blod" style="margin:20px 0;">人员聚集</div>
                <div class="" style="overflow: auto">

                    <div class="p-0-10">

                        <Table :columns="jujiColumns"
                               :data="jujiList"
                        >
                        </Table>

                    </div>


                </div>
            </div>

        </Modal>
    </div>
</template>

<script>

    export default {
        data() {
            return {
                type: 'SOS预警管理',

                search: {
                    str: '',
                    timeArr: [],
                    start_date: '',
                    end_date: '',
                },
                total: 0,
                page: 1,
                pageSize: 10,

                tableHeight: 500,


                columns: [
                    {
                        title: '围栏名称',
                        key: 'wl',
                    },
                    {
                        title: '聚集人数',
                        key: 'jjs'
                    },
                    {
                        title: '报警时间',
                        key: 'sj',
                        // sortable: 'custom'
                    },
                    {
                        title: '聚集时长',
                        key: 'sc',
                        // sortable: 'custom'
                    },
                    {
                        title: '操作',
                        render: (h, params) => {
                            let look = h('a', {
                                class: 'm-r-10',
                                on: {
                                    click: () => {
                                        console.log('查看', params.row);
                                        this.itemData = params.row;
                                        this.itemModal = true;

                                    }
                                }
                            }, '查看');
                            let edit = h('a', {
                                class: 'm-r-10',
                                on: {
                                    click: () => {
                                        console.log('编辑', params.row);
                                        this.itemData = params.row;
                                        this.itemModal = true;
                                    }
                                }
                            }, '处理');
                            return h('div', [look, edit]);
                        }
                    },
                ],
                list: [
                    {
                        mc: '徐新奎',
                        sjh: '18248454910',
                        gw: '环卫工',
                        jg: '长安区',
                        qy: '区域一、区域二',
                        zt: '正常',
                        wl: '市委路段',
                        jjs: '2人',
                        sc: '30分钟',
                        jwd: '东经 157°14′23、西经 157°14′23″',
                        sj: '2023-05-14 11:15:55',
                    },
                    {
                        mc: '周敏',
                        sjh: '18547485961',
                        gw: '环卫组长',
                        jg: '长安区',
                        qy: '区域一、区域二',
                        zt: '正常',
                        wl: '市委路段',
                        jjs: '2人',
                        sc: '40分钟',
                        jwd: '东经 157°14′21、西经 157°14′23″',
                        sj: '2023-05-12 14:55:32',
                    },
                    {
                        mc: '徐新奎',
                        sjh: '18858295842',
                        gw: '环卫工',
                        jg: '碑林区',
                        qy: '区域二',
                        zt: '请假中',
                        wl: '市委路段',
                        jjs: '2人',
                        sc: '2小时',
                        jwd: '东经 157°14′21、西经 157°14′22″',
                        sj: '2023-05-10 10:45:12',
                    },
                ],

                itemModal: false,
                itemData: {
                    "mj_mc":"",
                    "mj_bh": "",
                    "sz_wz": "",
                    "mh": "",
                    "lxfs": "",
                    "ms": "",
                    "gly": "",
                },
                fileList: [],


                jujiColumns: [
                    {
                        title: '姓名',
                        key: 'mc',
                    },
                    {
                        title: '性别',
                        key: 'xb'
                    },
                    {
                        title: '联系方式',
                        key: 'sjh',
                        // sortable: 'custom'
                    },
                    {
                        title: '聚集时长',
                        key: 'sc',
                        // sortable: 'custom'
                    },
                ],
                jujiList: [

                    {
                        mc: '黄良仙',
                        xb: '女',
                        sjh: '15569859987',
                        sc: '30分钟',
                    },
                    {
                        mc: '胡勺勺',
                        xb: '女',
                        sjh: '15757415484',
                        sc: '30分钟',
                    },
                ],
            }
        },
        created() {
            // this.getList();
        },
        mounted() {
            let mainContent = document.getElementById('mainContent')
            if(mainContent) {
                this.tableHeight =  mainContent.offsetHeight - 40
            }
            this.timer = setInterval(() => {
                if(mainContent) {
                    this.tableHeight =  mainContent.offsetHeight - 40
                } else {
                    mainContent = document.getElementById('mainContent')
                }
            }, 1000)
        },
        beforeDestroy() {
            clearInterval(this.timer);
        },
        methods: {
            changeDate(e) {
                console.log('e', e);
                this.search.start_date = '';
                this.search.end_date = '';

                if (e[0]) {
                    this.search.start_date = moment(e[0]).format('YYYY-MM-DD')
                }
                if (e[1]) {
                    this.search.end_date = moment(e[1]).format('YYYY-MM-DD')
                }
            },
            uploadFile(e) {
                console.log('附件')

                let url = '/management/fileUpload';

                this.$Spin.show()
                this.util.postFile(url, e).then(res => {
                    this.$Spin.hide()
                    console.log('上传返回', res);
                    if (res.status == 200) {
                        console.log('this.fileType', this.fileType, this.fileKey)
                        this.fileList.push(res.data)
                        // this.$forceUpdate()
                        this.$Message.success(res.msg);
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })

                return false;
            },

            onPageChange(page) {
                this.page = page;
                this.getList();
            },
            //改变每页条数
            changePageSize(size) {
                this.pageSize = size;
                this.onPageChange(1)
            },
            goSearch() {
                this.onPageChange(1)
            },
            reset() {
                this.search = {
                    str: '',
                    timeArr: [],
                };
                this.goSearch();
            },
            getList() {
                let postData = {
                    pageSize: this.pageSize,
                    pageNum: this.page,
                    nameOrCode: this.search.str,
                };

                if(this.search.timeArr.length) {
                    if(this.search.timeArr[0]) {
                        postData.startDate = moment(this.search.timeArr[0]).format('YYYY-MM-DD 00:00:00')
                    }
                    if(this.search.timeArr[1]) {
                        postData.endDate = moment(this.search.timeArr[1]).format('YYYY-MM-DD 23:59:59')
                    }
                }

                this.util.get('/hand/mjLists', postData).then(res => {
                    console.log('获取列表', JSON.parse(JSON.stringify(res)))
                    this.list = res.data || [];
                    this.total = res.total || 0;

                })
            },

            addItem() {
                this.itemData = {
                    "mj_mc":"",
                    "mj_bh": "",
                    "sz_wz": "",
                    "mh": "",
                    "lxfs": "",
                    "ms": "",
                    "gly": "",
                };
                this.itemModal = true;
            },
            editItem(itemData) {

                this.itemData = {
                    id: itemData.id,
                    "mj_mc": itemData.mj_mc,
                    "mj_bh": itemData.mj_bh,
                    "sz_wz": itemData.sz_wz,
                    "mh": itemData.mh,
                    "lxfs": itemData.lxfs,
                    "ms": itemData.ms,
                    "gly": itemData.gly,
                };
                this.itemModal = true;
            },
            confirm() {
                this.itemModal = false;
                return

                let itemData = this.itemData;

                if(!itemData.mj_mc) {
                    this.$Message.warning('请输入名称');
                    return;
                }
                if(!itemData.mj_bh) {
                    this.$Message.warning('请输入编号');
                    return;
                }
                if(!itemData.sz_wz) {
                    this.$Message.warning('请输入所在位置');
                    return;
                }
                if(!itemData.mh) {
                    this.$Message.warning('请输入门号');
                    return;
                }
                if(!itemData.gly) {
                    this.$Message.warning('请输入管理员');
                    return;
                }
                if(!itemData.lxfs) {
                    this.$Message.warning('请输入联系方式');
                    return;
                }

                let postData = {
                    "mj_mc": itemData.mj_mc,
                    "mj_bh": itemData.mj_bh,
                    "sz_wz": itemData.sz_wz,
                    "mh": itemData.mh,
                    "lxfs": itemData.lxfs,
                    "ms": itemData.ms,
                    "gly": itemData.gly,
                };

                let url = '/hand/editMj';
                if(itemData.id) {
                    postData.id = itemData.id;
                    url = '/hand/editMj';
                }

                this.util.post(url, postData).then(res => {
                    if(res.status == 200) {
                        this.$Message.success(res.msg);
                        this.getList();
                        this.itemModal = false;
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })

            },

        },
    }
</script>

